import { SearchPanel } from "./search-panel"
import { List } from "./list"
import { useDebounce, useDocumentTitle } from "../../utils";
import styled from "@emotion/styled";
import { Button } from "antd";
import { useProjects } from "../../utils/project";
import { useUsers } from "../../utils/user";
import { useProjectModal, useProjectsSearchParams } from "./util";
import { ErrorBox, Row, ScrenContainer } from "../../components/lib";

export const ProjectListScreen = ()=> {

    useDocumentTitle('项目列表',false);
    
    const [param,setParam] = useProjectsSearchParams();
    const {data:users} = useUsers();
    // 普通写法、这样写在这边定义了过多的状态，把异步请求的状态可以抽象出来
    // const [list,setList] = useState([]);
    // const [loading,setLoading] = useState(false);
    // const [error,setError] = useState<null | Error>(null);
    // 第一层封装 将异步请求的状态抽象出去 
    // const {run,isLoading,error,data:list} = useAsync<Project[]>();
    // useEffect(()=>{
    //     run(client('projects',{data:cleanObject(debouncedParam)}))
    //     //eslint-disable-next-line react-hooks/exhaustive-deps
    // },[debouncedParam]);
    // 第二层封装 将获取users和projects的信息 隐藏在custom hook里
    const {isLoading,error,data:list} = useProjects(useDebounce(param,1000));

    const {open} = useProjectModal();

    return (
        <ScrenContainer>
            <Row between={true}>
                <h1>项目列表</h1>
                <Button onClick={open}>添加项目</Button>
            </Row>
            <SearchPanel users={users||[]} param={param} setParam={setParam} />
            <ErrorBox error={error}/> 
            <List loading={isLoading} users={users || []} dataSource={list || []}/>
        </ScrenContainer>
    )
}

//设为true可以监视重复渲染的情况
ProjectListScreen.whyDidYouRender = false;